<template>
  <div class="document-detail">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="公文编号">{{ document.docNumber }}</el-descriptions-item>
      <el-descriptions-item label="公文类型">{{ formatType(document.type) }}</el-descriptions-item>
      <el-descriptions-item label="发文单位">{{ document.issuer }}</el-descriptions-item>
      <el-descriptions-item label="发文日期">{{ formatDateTime(document.issueDate) }}</el-descriptions-item>
      <el-descriptions-item label="创建人">{{ document.creatorName }}</el-descriptions-item>
      <el-descriptions-item label="创建部门">{{ document.departmentName }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ formatDateTime(document.createTime) }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="getStatusType(document.status)">{{ formatStatus(document.status) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="紧急程度">{{ formatUrgencyLevel(document.urgencyLevel) }}</el-descriptions-item>
      <el-descriptions-item label="密级">{{ formatSecurityLevel(document.securityLevel) }}</el-descriptions-item>
      <el-descriptions-item label="当前审批人" v-if="document.status === 1">{{ document.currentApproverName }}</el-descriptions-item>
    </el-descriptions>

    <div class="document-title">
      <h2>{{ document.title }}</h2>
    </div>

    <div class="document-content" v-html="document.content"></div>

    <div class="document-attachments" v-if="document.attachments && document.attachments.length > 0">
      <h3>附件列表</h3>
      <el-table :data="document.attachments" border>
        <el-table-column label="附件名称" prop="name" />
        <el-table-column label="上传人" prop="uploaderName" width="120" />
        <el-table-column label="上传时间" prop="uploadTime" width="160">
          <template slot-scope="scope">
            {{ formatDateTime(scope.row.uploadTime) }}
          </template>
        </el-table-column>
        <el-table-column label="大小" prop="size" width="120">
          <template slot-scope="scope">
            {{ formatFileSize(scope.row.size) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-download" @click="downloadAttachment(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="document-approvals" v-if="document.approvalRecords && document.approvalRecords.length > 0">
      <h3>审批记录</h3>
      <el-timeline>
        <el-timeline-item
          v-for="(record, index) in document.approvalRecords"
          :key="index"
          :timestamp="formatDateTime(record.approvalTime)"
          :type="record.result === 1 ? 'success' : 'danger'"
        >
          <div class="approval-record">
            <div class="approval-header">
              <span class="approver">{{ record.approverName }}</span>
              <el-tag size="mini" :type="record.result === 1 ? 'success' : 'danger'">
                {{ record.result === 1 ? '通过' : '驳回' }}
              </el-tag>
            </div>
            <div class="approval-comment" v-if="record.comment">
              <p>{{ record.comment }}</p>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DocumentDetail',
  props: {
    document: {
      type: Object,
      required: true
    }
  },
  methods: {
    formatDateTime(datetime) {
      if (!datetime) return '';
      const date = new Date(datetime);
      return date.toLocaleString();
    },
    formatType(type) {
      const typeMap = {
        1: '通知',
        2: '请示',
        3: '报告',
        4: '决定',
        5: '其他'
      };
      return typeMap[type] || '未知';
    },
    formatStatus(status) {
      const statusMap = {
        0: '草稿',
        1: '审批中',
        2: '已通过',
        3: '已驳回',
        4: '已归档'
      };
      return statusMap[status] || '未知';
    },
    getStatusType(status) {
      const statusTypeMap = {
        0: 'info',
        1: 'warning',
        2: 'success',
        3: 'danger',
        4: 'primary'
      };
      return statusTypeMap[status] || '';
    },
    formatUrgencyLevel(level) {
      const levelMap = {
        1: '普通',
        2: '紧急',
        3: '特急'
      };
      return levelMap[level] || '普通';
    },
    formatSecurityLevel(level) {
      const levelMap = {
        1: '普通',
        2: '秘密',
        3: '机密',
        4: '绝密'
      };
      return levelMap[level] || '普通';
    },
    formatFileSize(size) {
      if (!size) return '0 B';
      const units = ['B', 'KB', 'MB', 'GB', 'TB'];
      let index = 0;
      let fileSize = size;
      while (fileSize >= 1024 && index < units.length - 1) {
        fileSize /= 1024;
        index++;
      }
      return fileSize.toFixed(2) + ' ' + units[index];
    },
    downloadAttachment(attachment) {
      // 实现附件下载逻辑
      window.open(`/api/documents/attachment/download/${attachment.id}`, '_blank');
    }
  }
};
</script>

<style scoped>
.document-detail {
  padding: 20px;
}
.document-title {
  margin: 20px 0;
  text-align: center;
}
.document-content {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  min-height: 300px;
}
.document-attachments, .document-approvals {
  margin-top: 30px;
}
.approval-record {
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
}
.approval-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.approver {
  font-weight: bold;
}
.approval-comment {
  color: #606266;
}
</style> 